<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			/* ul li{
				font-size:40px;
				color: red;
			} */
		</style>
		<script>
			$(function(){
				/* $("ul li").hover(function(){
					$(this).css("font-size","50px");
				},function(){
					$(this).css("font-size","16px");
				}); */
				$("ul").on("mouseover","li",function(){
					$(this).css("font-size","50px");
				}).on("mouseout","li",function(){
					$(this).css("font-size","16px");
				});	
				$("#add").click(function(){
					var n=window.prompt("请输入一个新水果");
					if(n==null)
						return;
					var $li=$("<li></li>").append(n);
					$("ul").append($li);
				});
				$("#del").click(function(){
					$("ul li:last").remove();
				});
				$("#clone").click(function(){
					let u=$("ul:first").clone(false);
					$("p").before(u);
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>桃子</li>
			<li>菠萝</li>
			<li>葡萄</li>
			<li>香蕉</li>
			<li class="ff">柿子</li>
			<li>梨子</li>
			<li>榴莲</li>
		</ul>
		<p>
			<button type="button" id="add">添加</button>
			<button type="button" id="del">删除</button>
			<button type="button" id="clone">克隆</button>
		</p>
	</body>
</html>
